<template>
	<view>
		<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
			<view class="bck">
				<view style="width: 100%;height: 15px;"></view>
				<view class="title">
					<view>
						专属于你的
					</view>
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star1.png" mode="widthFix"></image>
					<view>
						寻宝<text>指南</text>
					</view>
				</view>
				<scroll-view scroll-y="true">

					<view class="tips">
						<view class="tips-item">
							<view class="tips-hint">
								<image class="image1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/TIPS1.png" mode="heightFix"></image>
								<image class="image2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star2.png" mode="widthFix"></image>
							</view>
							<view class="tips-title">
								硬币寻找规则
							</view>
							<!-- <view class="tips-content">1、本游戏设置三种硬币作为宝藏，分别是金币、银币和铜币，三种硬币可兑换的奖金也不相同。</view>
							<view class="tips-content">2、“橡果”是游戏统一货币，可通过完成任务、系统赠送等方式获得。</view>
							<view class="tips-content">3、三种硬币散落在上海市的各个角落，需要玩家线下前往不同地点进行寻找，具体位置将在“宝藏猎人”小程序上显示。</view>
							<view class="tips-content">4、金币仅有一枚，可通过消除方格的形式缩小区域范围，消除方格需要花费“橡果”。</view>
							<view class="tips-content">5、银币与铜币在地图上的区域范围表现为圆圈，可通过花费“橡果”缩小圆圈，也可通过花费橡果获得有关宝藏的文字或图片线索。</view> -->
							<view class="tips-vedio">
								<video src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips1.mp4"></video>
							</view>
						</view>
						<view class="tips-item">
							<view class="tips-hint2">
								<image class="image1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/TIPS2.png" mode="heightFix"></image>
								<image class="image2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/star3.png" mode="widthFix"></image>
							</view>
							<view class="tips-title" style="text-align: right;">
								兑换奖励规则
							</view>
							<!-- <view class="tips-content">1、找到硬币时，需要拍摄包含硬币所在位置和硬币本身的视频。</view>
							<view class="tips-content">2、使用“宝藏猎人”小程序扫描硬币上特定的二维码，在弹出的页面中上传拍摄的视频进行审核。</view>
							<view class="tips-content">3、成功上传视频后，进入“我的硬币”界面，找到对应硬币，点击右下角“兑换奖励”，等待审核通过后奖励将发放。</view>
							<view class="tips-content">4、发布所拍摄视频至抖音、小红书等平台满7天，并@我们的官方账号，带上#宝藏猎人、#QUXUN、#上海寻宝记这三个tag,即可获得额外的丰厚“橡果”奖励。</view> -->
							<view class="tips-vedio">
								<video src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/video/tips2.mp4"></video>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</touch-popup>
	</view>
</template>
<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose,
		computed,
		onMounted
	} from 'vue'
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件


	const open = () => {
		popup.value.open()
	}
	defineExpose({
		open
	}) // 暴露方法
</script>
<style scoped>
	.tips-content {
		font-size: 13px;
		padding: 5px;
		line-height: 1.5;
	}
	scroll-view {
		height: calc(100% - 105px);
	}

	.tips-hint2 {
		position: absolute;
		left: 15px;
		top: -10px;
	}

	.tips-hint {
		position: absolute;
		right: 15px;
		top: -10px;
	}

	.image1 {
		height: 15px;
		z-index: 1;
		position: relative;
	}

	.image2 {
		width: 24px;
		position: absolute;
		left: -10px;
		top: -10px;
	}

	.tips-title {
		padding: 10px 5px;
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
		text-align: center;
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-underline-position: from-font;
		text-decoration-skip-ink: auto;
		text-align: left;
	}

	video {
		border-radius: 15px;
	}

	.tips-vedio {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.tips-item {
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 20px;
		padding: 5px;
		margin-top: 20px;
		position: relative;
	}

	.tips {
		display: flex;
		padding: 0 30px 15px 30px;
		flex-direction: column;
	}

	.title view:first-child {
		font-size: 17px;
	}

	.title view:last-child {
		font-size: 20px;
	}

	.title text {
		color: #ffb800;
	}

	.title image {
		position: absolute;
		width: 25px;
		height: auto;
		left: 20px;
		bottom: 0;
	}

	.title {
		display: flex;
		font-weight: 400;
		flex-direction: column;
		padding: 15px 30px;
		line-height: 30px;
		position: relative;
	}

	.bck {
		height: 100%;
		background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/learning/bck.png') no-repeat;
		background-size: 750rpx;
		background-position: bottom;
	}
</style>